<template>
    <div>
        <h3>测试</h3>
        <ul>
            <li v-for="(arr,i) in elements" :key="i">
                <div v-for="(item,j) in arr" :key="j">
                    {{ item.name }}
                </div>
            </li>
        </ul>
    </div>
</template>

<style>
li {
    background-color: #ccc;
    margin-top: 20px;
    
}
</style>

<script>
import {table} from './table.js'
// console.log(table);

// [
//     [
//         {记录1}
//         {记录2}
//         {记录3}
//         {记录4}
//     ],
//     [
//         {记录1}
//         {记录2}
//         {记录3}
//         {记录4}
//     ],
//     [
//         {记录1}
//         {记录2}
//         {记录3}
//         {记录4}
//     ]
// ]



export default {
    data(){
        return {
            elements: []
        }
    },
    created(){
        let {result:{ songs }} = table;
        // console.log(songs);
        let size = 4;
        let start = 0 * size;
        let end = start + size;
        let groups = Math.ceil( songs.length / size);
        let newArr = [];
        for(let i = 0 ; i < groups ; i ++){
            //开始索引值
            start = i * size;
            // 结束索引值
            end = start + size;
            // 截取数据
            let arr = songs.slice(start, end);
            // 每循环一个就添加一组数据(4个记录)
            newArr.push(arr);
        }
        console.log(newArr);
        this.elements = newArr;
    }
}
</script>